<template>
  <div>
    <el-header>

      <el-row >
        <el-col :span="12">
          <span>欢迎光临</span>
        </el-col>
        <el-col :span="8" class="test">
          <el-row>
            <el-col :span="16">
              <el-input placeholder="请输入图书名字"   v-model="bookName" > </el-input>
            </el-col>
            <el-col :span="8">
              <el-button>搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
         <el-button @click="shopCar()" type="primary">购物车</el-button>|
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-button>{{ userInfo.username}}</el-button><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><router-link to="userInfo">个人信息</router-link></el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>

    </el-header>
    <div style="margin: auto;margin-top: 20px;width: 80%;border-left: 1px solid red;border-right: 1px solid red">
      <el-row style="margin: auto;margin-top: 20px;width: 80%;border-left: 1px solid red;border-right: 1px solid red">
        <el-col :span="4">
          <img width="200px"  src="@/assets/image/logo.png" alt="">
          <div class="grid-content bg-purple">
            <div class="typeClass">
              <div v-for="item in typeList">
                <div style="margin: 20px 10px"> {{ item.typename }}</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="grid-content bg-purple-light">
            <el-carousel>
              <el-carousel-item v-for="item in imageList">
                <img :src="item" alt="" srcset="">
              </el-carousel-item>
            </el-carousel>


          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <el-row>
          <el-col  v-for="item in bookList"    :span="6">
            <el-card :body-style="{ padding: '0px' }" style="height: 400px" >
              <div slot="header" class="clearfix">
                <span>{{item.bookName}}</span>

              </div>
              <img :src="item.bookImage" style="height: 200px;width: 200px" alt="本书暂且无图书" @click="goPage(item)"  class="image">
              <div style="padding: 14px;">

                <div class="bottom clearfix">
                  <time class="time">{{ item.price }}</time>
                  <el-button type="text" class="button" @click.native="addBookInShopCar(item.id)">加入购物车</el-button>
                  <el-button type="text" class="button">点击购买</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import {listSearch} from "@/config/mixin/searchMixin";

import Cookie from "js-cookie";
import shopCar from "@/views/user/shopCar.vue";

export default {
  mixins: [listSearch],

  data() {
    return {
      typeList: [],
      imageList: ['http://img60.ddimg.cn/2022/12/1/202212011658175820.jpg', 'http://img60.ddimg.cn/2022/12/1/2022120116573467736.jpg'
        , 'http://img62.ddimg.cn/2022/12/1/2022120116510844125.jpg'],
      userInfo: [],
      bookList:[],
      bookName:'',
      currentDate:new Date(),
    }
  },
  created() {
    this.userInfo = JSON.parse(Cookie.get('userInfo'));
    let params = {
      url: 'type',
      method: 'get'
    }
    this.sendReq(params, res => {
      this.typeList = res.data.records
    }),
        this.getBookList()
  },
  methods:{
    shopCar() {
        this.$router.push('shopCar')
    },
    addBookInShopCar(id){
      let params = {
        url:'shopCar',
        method:'get',
        payload:{
          userId:this.userInfo.id,
          bookId:id,
          status:1
        }
      }
      this.sendReq(params, res => {
          if(res.data.records.length !=0 ){
               this.$message({
                 type:'fail',
                 title:'添加失败',
                 message:"您的购物车已经存在对应商品,请勿重复添加"
               })
          }else{
            params = {
               url:'shopCar',
               data:{
                 userId:this.userInfo.id,
                 bookId:id,
                 bookCount:'1'
               }
             }

             this.sendReq(params, res => {
               this.$message({
                 type:'success',
                 title:'成功',
                 message:res.msg
               })
             })

          }
      })

    },
    goPage(data){
        this.$router.push({
          path:'/productDetail',
          name:'productDetail',
          params:data
        })
    },
    getBookList(){
      let params = {
        url:'book',
        method:'get',
        payload:{
          size:20
        }
      }
      this.sendReq(params,res =>{
        this.bookList = res.data.records
      })
    }
  }
}
</script>

<style lang="less" scoped>
.typeClass {
  margin-left: 20px;
  text-align: left;
  background-color: grey;
}
.test{
  /deep/ .el-input__inner {
    width: 100%;
  }
}
.content{
  width: 80%;
  margin:  40px auto;
}

</style>
